<template>
	<div style="height: 100%;width:1700px;color: black">
		<a-layout style="width:1700px;height: 100%;">
			<left active="1"></left>
			<a-layout-content
					style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;left: 15px;background: #ffffff !important;">
				<div>
					<right-top icon="2.png" text="互联网诈骗">
						<a-tabs default-active-key="1" style="position: absolute;right: 40px;top: 22px;font-weight: 400;"
						        size="small"
						        @change="callback">
							<a-tab-pane key="1" tab="事件数据"></a-tab-pane>
							<a-tab-pane key="2" tab="统计分析" force-render></a-tab-pane>
						</a-tabs>
					</right-top>
				</div>
				<div class="right-content" :style="{display:change===1?'':'none'}">
					<div style="background-color:white;width:100%;padding:20px">
						<div style="background-color:#f7f7f7">
							<div style="height:150px;display:flex">
								<div style="width:10%;display: table-cell;vertical-align: middle;text-align: center;">
									<img src="../../assets/images/generalDetection/head.png" style="margin-top:30px">
								</div>
								<div style="width:90%;">

									<div style="display:flex;padding-right:20px;padding-top:15px">
										<div style="width:95%">用户23908242093</div>
										<div
												style="width:5%;padding:6px;padding-right:11px;padding-left:11px;background-color:white;float:right;cursor: pointer;"
												@click="fanhui">返回
										</div>
									</div>
									<div style="display:flex;width:200px;height:30px;justify-content:space-around;">
										<div style="width:25%"> 关注</div>
										<div style="width:25%;color:#1777fc;font-weight: bold;font-size:15px"> 222</div>
										<div style="width:25%">粉丝</div>
										<div style="width:25%;color:#ff6200;font-weight: bold;font-size:15px">67,842</div>
									</div>
									<div style="color:#828282;padding-right:30px">
										简介：转发微博 @中国电信海南客服 #防范通讯信息诈骗#随着手机APP逐渐增多，一些恶意APP也趁机混入手机软件时长，如何规避这些恶意APP呢？今天小翼教大家几招
										[并不简单]
										<span>...</span>
										<span style="color:#1375ff;cursor:pointer">[查看原文]</span>
									</div>

								</div>
							</div>
							<div
									style="height:65px;background-color:white;margin-left:30px;margin-right:30px;padding-left:20px;padding-right:20px">
								截至分析时间2021年9月23日上午9点49分，信息曝光量269，903，共计转发9次，其中一转9次，二转0次，三转0次，四转0次，四层以上总共0次。
								<br/>广州省参与转发人数最多，疑似水军比例0%，在正常范围
							</div>
							<div style="height:135px;display:flex;width:35%;margin-left:20px">
								<div style="width:31%;padding-left:30px;padding-top:20px">
									传播路径：
								</div>
								<div style="display:flex;flex-wrap:wrap">
									<div style="height:70%;width:100%;display: table-cell;vertical-align: middle;text-align: center;">
										<img src="../../assets/images/generalDetection/head_1.png" style="margin-top:10px">
									</div>
									<div style="height:30%;width:100%;display: table-cell;vertical-align: middle;text-align: center;">
										中国电信海南客服
									</div>
								</div>
								<div style="display: table-cell;text-align: center;width:20%;margin-top:4%">
									<img src="../../assets/images/generalDetection/jiantou.png" style="margin-top:10px">
								</div>
								<div style="display:flex;flex-wrap:wrap">
									<div style="height:70%;width:100%;display: table-cell;vertical-align: middle;text-align: center;">
										<img src="../../assets/images/generalDetection/head.png" style="margin-top:10px">
									</div>
									<div style="height:30%;width:100%;display: table-cell;text-align: center;">
										用户23908242093
									</div>
								</div>

							</div>
						</div>
					</div>
					<div style="" class="second_01">
						<div style="width:100%;height:8%;padding-left:20px">
							<span style="padding-top:10px;border-bottom:1px solid #1375ff;font-size:15px">首发</span>
						</div>
						<div style="" class="second_02">
							<div style="width:60%;height:40%;display:flex;">
								<div style="width:20%;display: table-cell;vertical-align: middle;text-align: center;">

									<img src="../../assets/images/generalDetection/head_1.png" style="margin-top:10px">

								</div>
								<div style="width:80%;display:flex;flex-wrap:wrap">
									<div style="margin-top:10px;height:40%;width:100%">
										中国电信海南客服
									</div>
									<div style="height:60%;width:25%;display:flex;justify-content: space-around">
										<div style="width:25%"> 关注</div>
										<div style="width:25%;color:#1777fc;font-weight: bold;font-size:15px"> 222</div>
										<div style="width:25%">粉丝</div>
										<div style="width:25%;color:#ff6200;font-weight: bold;font-size:15px">67,842</div>
									</div>

								</div>
							</div>
							<div style="width:100%;height:60%;margin-left:40px;margin-right:40px">
								<div style="color:#828282;padding-top:10px">
									博文：#防范通讯信息诈骗#随着手机APP逐渐增多，一些恶意APP也趁机混入手机软件市场。如何规避这些恶意APP呢？今天小翼就教大家几招并不简单

									<span style="color:#1375ff;cursor:pointer">[查看原文]</span>
								</div>
								<div style="margin-top:10px;padding-top:6px">
									2021-09-27 17:05:00
								</div>
							</div>
						</div>
					</div>
					<div style="" class="third">
						<div style="" class="third_01">
							<span style="font-size:15px" class="third_01_01">关键</span><span style="font-size:15px">传播路径</span>
						</div>
						<div style="" class="third_02" ref="chart2">

						</div>
					</div>
					<div style="" class="four">
						<div style="" class="four_01">
							<span style="" class="four_01_01" style="font-size:15px">引爆</span><span style="font-size:15px">点</span>
							<span style="margin-left:10px;color:#828282;"> 关键传播用户 （引发最大转发的转发者）</span>
						</div>
						<div style="" class="four_02">
							<div style="" class="four_02_01">
								<div style="" class="four_02_01_01">
									<div style="padding-top:20px" class="head_04">
										<div style="" class="head_04_01">
											<img src="../../assets/images/generalDetection/head_2.png" style="margin-top:10px">
										</div>
										<div style="" class="head_04_title">
											<div style="margin-top:10px;height:40%;width:100%">
												中国电信海南客服
											</div>
											<div style="width:50%;display:flex;justify-content: space-around">
												<div style="width:25%"> 关注</div>
												<div style="width:25%;color:#1777fc;font-weight: bold;font-size:15px"> 222</div>
												<div style="width:25%">粉丝</div>
												<div style="width:25%;color:#ff6200;font-weight: bold;font-size:15px">67,842</div>
											</div>
										</div>
									</div>
									<div style="color:#828282;padding:26px;padding-top:30px;">
										博文:转发微博@中国电信海南客服#防范通讯信息诈骗#随着手机APP逐渐增多，一些恶意APP也趁机混入手机软件市场。
										如何规避这些恶意APP呢?今天小翼就教大家几招[并不简单.].

										<span>...</span>
										<span style="color:#1375ff;cursor:pointer">[查看原文]</span>
									</div>
									<div style="margin-left:26px;color:black">
										2021-09-27 17:05:00
									</div>
								</div>
								<div style="height:50%;width:100%">
									<div style="margin-left:26px;color:black;margin-top:15px">
										<span>关键传播路径</span>
									</div>
									<div style="display:flex;padding-top:20px;width:70%;padding-left:15px">
										<div style="display:flex;flex-wrap:wrap;width:30%;height:100%">
											<div style="height:70%;width:100%;display: table-cell;vertical-align: middle;text-align: center;">
												<img src="../../assets/images/generalDetection/head_2.png" style="margin-top:10px">
											</div>
											<div
													style="height:30%;width:100%;display: table-cell;vertical-align: middle;text-align: center;margin-top:10px">
												中国电信客服
											</div>
										</div>
										<div style="display: table-cell;text-align: center;width:10%;margin-top:4%;width:30%;height:100%">
											<img src="../../assets/images/generalDetection/jiantou.png" style="margin-top:10px">
										</div>
										<div style="display:flex;flex-wrap:wrap;width:30%;height:100%">
											<div style="height:70%;width:100%;display: table-cell;vertical-align: middle;text-align: center;">
												<img src="../../assets/images/generalDetection/head_7.png" style="margin-top:10px">
											</div>
											<div style="height:30%;width:100%;display: table-cell;text-align: center;margin-top:10px">
												YUIAN亿健
											</div>
										</div>
									</div>
								</div>
							</div>
							<div style="width:60%" class="four_02_02" ref="chart3">


							</div>

						</div>
					</div>
					<div style="" class="five">
						<div style="" class="five_01">
							<span style="font-size:15px" class="five_01_01">转发</span><span style="font-size:15px">时间趋势</span>
						</div>
						<div style="" class="five_02" id="trend"></div>
					</div>

				</div>
				<div class="right-content" :style="{display:change===2?'':'none'}">
					<div class="titleDiv">
						<div class="titleFontDiv">
							<div class="fontBottomLine">事件</div>
							舆情量趋势
						</div>
					</div>
					<div id="lineChart"
					     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 300px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

					</div>
					<div style="display: flex">
						<div style="width: 50%">
							<div class="titleDiv">
								<div class="titleFontDiv">
									<div class="fontBottomLine">情感</div>
									分析
								</div>
							</div>
						</div>
						<div style="width: 50%">
							<div class="titleDiv">
								<div class="titleFontDiv">
									<div class="fontBottomLine">媒体</div>
									分类统计
								</div>
							</div>
						</div>
					</div>
					<div style="display: flex;width: 98%;margin-left: 1%;">
						<div style="width: 50%">
							<div id="pieChart"
							     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 400px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

							</div>
						</div>
						<div style="width: 50%">
							<div id="mediaBarChart"
							     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 400px;width: 595px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

							</div>
						</div>
					</div>
					<div class="titleDiv">
						<div class="titleFontDiv">
							<div class="fontBottomLine" style="">热词</div>
							词云
						</div>
					</div>
					<div
							style="width: 96%;margin-top: 10px;border: 1px solid #EFEFEF;height: 390px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8;padding: 25px 20px">
						<div style="padding-left: 20px">
							通过对热词词云的分析,可以发现媒体和网民对于该事件主要关注"字相、十万贯、电信网络、天心区人民法院、教育整顿"等信息。
						</div>
						<div style="height: 300px;width: 100%;margin-top: 15px;display: flex">
							<div id="wordCloudChart" style="width: 545px;height: 280px;">
							</div>
							<div
									style="margin-top: 20px;margin-left: 20px;width: 520px;height: 85%;display: flex;flex-wrap: wrap;align-items: center;background-clip: content-box;background: #F8FAFF;">
								<div class="tableTr">
									<div class="tableTd20">序号</div>
									<div class="tableTd30">热词</div>
									<div class="tableTd50">频次</div>
								</div>
								<div class="tableTr">
									<div class="tableTd20"><img src="../../../public/img/sort1.png" style="width: 30px"></div>
									<div class="tableTd30">字相</div>
									<div class="tableTd50"><span style="">13242</span>
										<a-progress :percent="100" :showInfo="false" style="width:55%;" :strokeColor='color'/>
									</div>
								</div>
								<div class="tableTr">
									<div class="tableTd20"><img src="../../../public/img/sort2.png" style="width: 30px"></div>
									<div class="tableTd30">十万贯</div>
									<div class="tableTd50"><span style="">10108</span>
										<a-progress :percent="80" :showInfo="false" style="width:55%;" :strokeColor='color'/>
									</div>
								</div>
								<div class="tableTr">
									<div class="tableTd20"><img src="../../../public/img/sort3.png" style="width: 30px"></div>
									<div class="tableTd30">电信网络</div>
									<div class="tableTd50"><span style="">8735</span>
										<a-progress :percent="60" :showInfo="false" style="width:55%;" :strokeColor='color'/>
									</div>
								</div>
								<div class="tableTr">
									<div class="tableTd20">4</div>
									<div class="tableTd30">天心区人民法院</div>
									<div class="tableTd50"><span style="">5102</span>
										<a-progress :percent="30" :showInfo="false" style="width:55%;" :strokeColor='color'/>
									</div>
								</div>
								<div class="tableTr">
									<div class="tableTd20">5</div>
									<div class="tableTd30">教育整顿</div>
									<div class="tableTd50"><span style="">4831</span>
										<a-progress :percent="20" :showInfo="false" style="width:55%;" :strokeColor='color'/>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="titleDiv">
						<div class="titleFontDiv">
							<div class="fontBottomLine">热词</div>
							分布趋势
						</div>
						<div style="height: 100%;width: 70%;display: flex;justify-content: space-around;margin-right: 15px;">
							<div class="scatterLabel scatterLabelActive">全部</div>
							<div class="scatterLabel">微博</div>
							<div class="scatterLabel">新闻</div>
							<div class="scatterLabel">头条</div>
							<div class="scatterLabel">百度</div>
							<div class="scatterLabel">文书裁判网</div>
							<div class="scatterLabel">国家信息安全漏洞共享平台</div>
							<div class="scatterLabel">中国监察网</div>
							<div class="scatterLabel">工信部网站</div>
							<div class="scatterLabel">微信公众号</div>
							<div class="scatterLabel">腾讯新闻</div>
						</div>
					</div>
					<div id="scatterChart"
					     style="margin-top: 10px;border: 1px solid #EFEFEF;height: 350px;width: 1213px;margin-left: 2%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8">

					</div>
				</div>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'
import echarts from 'echarts'
import '@/utils/wordCloud'
import moment from 'moment'

import {getInfo} from '@/api/system/info'

const symbol1 = "image://" + require('../../assets/images/generalDetection/head_1.png');
const symbol2 = "image://" + require('../../assets/images/generalDetection/head_2.png');
const symbol3 = "image://" + require('../../assets/images/generalDetection/head_3.png');
const symbol4 = "image://" + require('../../assets/images/generalDetection/head_4.png');
const symbol5 = "image://" + require('../../assets/images/generalDetection/head_5.png');
const symbol6 = "image://" + require('../../assets/images/generalDetection/head_6.png');
const symbol7 = "image://" + require('../../assets/images/generalDetection/head_7.png');
const symbol8 = "image://" + require('../../assets/images/generalDetection/head_8.png');
const symbol9 = "image://" + require('../../assets/images/generalDetection/head_9.png');
const symbol10 = "image://" + require('../../assets/images/generalDetection/head_10.png');
const symbol11 = "image://" + require('../../assets/images/generalDetection/head_11.png');
const columns = [
	{title: '站点', dataIndex: 'zd', align: 'center', ellipsis: true,},
	{title: '标题', dataIndex: 'bt', ellipsis: true, align: 'center'},
	{title: '发布时间', dataIndex: 'sj', ellipsis: true, align: 'center'},
];


const CubeLeft = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c0 = [shape.x, shape.y]
		const c1 = [shape.x - 9, shape.y - 9]
		const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
		const c3 = [xAxisPoint[0], xAxisPoint[1]]
		ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
	}
})
const CubeRight = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c1 = [shape.x, shape.y]
		const c2 = [xAxisPoint[0], xAxisPoint[1]]
		const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
		const c4 = [shape.x + 18, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
const CubeTop = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const c1 = [shape.x, shape.y]
		const c2 = [shape.x + 18, shape.y - 9]
		const c3 = [shape.x + 9, shape.y - 18]
		const c4 = [shape.x - 9, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]


export default {
	name: "generalDetectionroots",
	components: {
		left,
		rightTop
	},
	data() {
		return {
			change: 1,
			listData: [],
			color: "#8674FF",
			pagination: {
				onChange: page => {
					console.log(page);
				},
				pageSize: 10,
			},
			actions: [
				{type: 'star-o', text: '156'},
				{type: 'like-o', text: '156'},
				{type: 'message', text: '2'},
			],
			labelCol: {span: 10},
			wrapperCol: {span: 14},
			form: {
				name: '',
				region: undefined,
				date1: undefined,
				delivery: false,
				type: [],
				resource: '',
				desc: '',
			},
			myChartBar: undefined,
			myChartTree: undefined,
			myChartBottomLine: undefined,
			myChartMediaBar: undefined,
			myChartScatter: undefined,
			myChartPie: undefined,
			dataLevelLine1: [12, 80, 79, 27, 99, 43, 33],
			dataLevelLine2: [11, 76, 94, 23, 29, 77, 53],
			dataLevelLine3: [67, 62, 65, 35, 44, 69, 52],
			dataLevelDate: [],
		}
	},
	methods: {
		echartShow() {
			this.linetrend = this.$echarts.init(document.getElementById('trend'));
			const MAX = [];
			for (let i = 0; i < 15; i++) {
				MAX.push(Math.round(Math.random() * 600) + 300);
			}
			const VALUE = [];
			for (let i = 0; i < 15; i++) {
				VALUE.push(Math.round(Math.random() * 300 + 200));
			}
			let date = [];
			for (let i = 0; i < 15; i++) {
				date.push(moment().subtract(i, 'days').format("MM-DD"))
			}
			date = date.reverse();
			let option = {
				backgroundColor: '#fff',
				// title: {
				//   text: '',
				//   top: 32,
				//   left: 18,
				//   textStyle: {
				//     color: '#00F6FF',
				//     fontSize: 24,
				//   },
				// },
				grid: {
					left: 20,
					right: 40,
					bottom: '10%',
					top: 30,
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: date,
					axisLine: {
						show: true,
						lineStyle: {
							color: 'black',
						},
					},
					offset: 20,
					axisTick: {
						show: false,
						length: 9,
						alignWithLabel: true,
						lineStyle: {
							color: '#7DFFFD',
						},
					},
					axisLabel: {
						fontSize: 10,
					},
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: true,
						lineStyle: {
							color: 'black',
						},
					},
					splitLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						fontSize: 16,
					},
					boundaryGap: ['20%', '20%'],
				},
				series: [
					{
						type: 'custom',
						renderItem: function (params, api) {
							const location = api.coord([api.value(0), api.value(1)]);
							return {
								type: 'group',
								children: [
									{
										type: 'CubeLeft',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: 'rgba(206, 226, 253,0.5)',
										},
									},
									{
										type: 'CubeRight',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: 'rgba(232, 242, 254,0.5)',
										},
									},
									{
										type: 'CubeTop',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: 'rgba(232, 242, 254,0.5)',
										},
									},
								],
							};
						},
						data: MAX,
					},
					{
						type: 'custom',
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							return {
								type: 'group',
								children: [
									{
										type: 'CubeLeft',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
												{
													offset: 0,
													color: '#4892FD',
												},
												{
													offset: 1,
													color: '#9AC2FD',
												},
											]),
										},
									},
									{
										type: 'CubeRight',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
												{
													offset: 0,
													color: '#4993FC',
												},
												{
													offset: 1,
													color: '#9AC2FD',
												},
											]),
										},
									},
									{
										type: 'CubeTop',
										shape: {
											api,
											xValue: api.value(0),
											yValue: api.value(1),
											x: location[0],
											y: location[1],
											xAxisPoint: api.coord([api.value(0), 0]),
										},
										style: {
											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
												{
													offset: 0,
													color: '#91BDFA',
												},
												{
													offset: 1,
													color: '#5398FD',
												},
											]),
										},
									},
								],
							};
						},
						data: VALUE,
					},
				],
			};
			this.linetrend.setOption(option);
		},
		drawWorldCloud() {
			this.myChartWordCloud = this.$echarts.init(document.getElementById("wordCloudChart"))
			// 绘制图表
			this.myChartWordCloud.setOption({
				tooltip: {
					show: false
				},
				series: [{
					name: '热词分析',
					type: 'wordCloud',
					sizeRange: [14, 50],
					rotationRange: [0, 0],
					shape: 'circle',
					textPadding: 0,
					autoSize: {
						enable: true,
						minSize: 6
					},
					textStyle: {
						normal: {
							color: function () {
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					data: [{
						name: "凤阳县公安局",
						value: 500
					}, {
						name: "上海文",
						value: 520
					}, {
						name: "内卷",
						value: "100"
					}, {
						name: "李一男",
						value: "200"
					}, {
						name: "电信网络",
						value: "700"
					}, {
						name: "通讯商",
						value: "500"
					}, {
						name: "平马镇",
						value: "200"
					}, {
						name: "百度",
						value: "200"
					}, {
						name: "用新",
						value: "300"
					}, {
						name: "字相",
						value: "1000"
					}, {
						name: "教育整顿",
						value: "500"
					}, {
						name: "天心区人民法院",
						value: "500"
					}, {
						name: "十万贯",
						value: "700"
					}, {
						name: "隐私",
						value: "200"
					}, {
						name: "大化",
						value: "250"
					}, {
						name: "高运",
						value: "100"
					}, {
						name: "殷桃",
						value: "200"
					}, {
						name: "代维",
						value: "200"
					}, {
						name: "网络安全",
						value: "100"
					}, {
						name: "都昌县公安局",
						value: "300"
					}, {
						name: "安全",
						value: "100"
					}]
				}]
			})

			/*myChart.on('click', function (params) {
				//alert((params.name));
				window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));

			});*/
		},
		fanhui() {
			this.$router.push({
				path: '/generalDetection',

			})
		},
		drawLine() {

			let t = this
			let color = [
				'#FF5B00', '#FEAE31', '#5D80FD', '#67CC81'
			];

			let xAxisData = ['2021-10-28', '2021-10-29', '2021-10-30', '2021-10-31', '2021-11-01', '2021-11-02', '2021-11-03'];
			let yAxisData1 = this.dataLevelLine3;
			let yAxisData2 = this.dataLevelLine2;
			let yAxisData3 = this.dataLevelLine1;

			const hexToRgba = (hex, opacity) => {
				let rgbaColor = "";
				let reg = /^#[\da-f]{6}$/i;
				if (reg.test(hex)) {
					rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
							"0x" + hex.slice(3, 5)
					)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
				}
				return rgbaColor;
			}

			this.myChartBottomLine = this.$echarts.init(document.getElementById('lineChart'))
			// 绘制图表
			this.myChartBottomLine.setOption({
				color: color,
				legend: {
					top: 10,
					right: '40%',
					icon: 'rect',
					itemWidth: 12,
					itemHeight: 12,
					itemGap: 50,
				},
				tooltip: {
					trigger: "axis",
					formatter: function (params) {
						let html = '';
						params.forEach(v => {
							html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
                `;
						})
						return html
					},
					extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
				},
				grid: {
					top: 40,
					bottom: 15,
					left: 30,
					right: 50,
					containLabel: true
				},
				xAxis: [{
					type: "category",
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: "#333"
						}
					},
					axisLine: {
						lineStyle: {
							color: "#D9D9D9"
						}
					},
					data: xAxisData,
				}],
				yAxis: [{
					show: false,
					type: "value",
					name: '数量',
					axisLabel: {
						textStyle: {
							color: "#666"
						}
					},
					nameTextStyle: {
						color: "#666",
						fontSize: 12,
						lineHeight: 10
					},
					// 分割线
					splitLine: {
						lineStyle: {
							type: "dashed",
							color: "#E9E9E9"
						}
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				}],
				series: [{
					// name: "2018",
					name: "负面",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[0],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[0], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
										offset: 0,
										color: hexToRgba(color[0], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[0], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[0], 0.1),
							shadowBlur: 10
						}
					},
					data: yAxisData1
				}, {
					name: "中性",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[1],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[1], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式 (实心点)
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[{
										offset: 0,
										color: hexToRgba(color[1], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[1], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[1], 0.1),
							shadowBlur: 10
						}
					},
					data: yAxisData2
				},
					{
						name: "正面",
						type: "line",
						smooth: true,
						symbolSize: 8,
						zlevel: 3,
						lineStyle: {
							normal: {
								color: color[2],
								shadowBlur: 3,
								shadowColor: hexToRgba(color[1], 0.5),
								shadowOffsetY: 8
							}
						},
						symbol: 'circle',//数据交叉点样式 (实心点)
						areaStyle: {
							normal: {
								color: new t.$echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
											offset: 0,
											color: hexToRgba(color[2], 0.3)
										},
											{
												offset: 1,
												color: hexToRgba(color[2], 0.1)
											}
										],
										false
								),
								shadowColor: hexToRgba(color[2], 0.1),
								shadowBlur: 10
							}
						},
						data: yAxisData3
					}]
			});
		},
		drawPie() {
			var that = this
			this.myChartPie = this.$echarts.init(document.getElementById('pieChart'))
			// 绘制图表
			this.myChartPie.setOption({

				tooltip: {
					show: true,
					trigger: 'item',
					formatter: "{b}",
					backgroundColor: '#F8F8F8',
					textStyle: {
						color: "#000000"
					}
				},
				legend: {
					itemWidth: 15,
					itemHeight: 15,
					itemGap: 80,
					top: 30,
				},
				series: [{
					roseType: 'area',
					name: '数量',
					type: 'pie',
					radius: ['40%', '70%'],
					center: ['50%', '60%'],
					data: [{value: 56, name: '正面'},
						{value: 36, name: '中性'},
						{value: 23, name: '负面'},],
					label: {
						normal: {
							color: 'black',
							show: false,
							position: 'center',
							formatter: '{b}情感\n{text|{c}}',
							rich: {
								text: {
									align: 'center',
									verticalAlign: 'middle',
									padding: 8,
									fontSize: 30,
									color: 'black'
								},
								value: {
									align: 'center',
									verticalAlign: 'middle',
									fontSize: 20
								}
							}
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '12'
							}
						}
					},
					itemStyle: {
						normal: {
							color: function (params) {
								var colorList = ['#5D80FD', '#FEAE31', '#FF5B00'];
								return colorList[params.dataIndex]
							}
						}
					},
					labelLine: {
						normal: {
							show: true
						}
					}
				}]
			})

			this.myChartPie.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: 0
			});

			this.myChartPie.on("mouseover", function (e) {
				var index = 0;
				if (e.dataIndex !== index) {
					that.myChartPie.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
						dataIndex: index
					});
				}
			});
			this.myChartPie.on("mouseout", function (e) {
				var index = 0;
				if (e.dataIndex !== index) {
					that.myChartPie.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: index
					});
				}
			});
		},
		drawMediaBar() {
			let t = this;
			this.myChartMediaBar = this.$echarts.init(document.getElementById('mediaBarChart'))
			// 绘制图表
			this.myChartMediaBar.setOption({
				grid: {
					left: '2%',
					right: '4%',
					bottom: '2%',
					top: '2%',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					formatter: function (params) {
						return params[0].name + '<br/>' +
								"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
								params[0].seriesName + ' : ' + params[0].value + ' <br/>'
					}
				},
				xAxis: [{
					type: 'category',
					inverse: false,
					axisLabel: {
						show: true,
						margin: 15,
						interval: 0,
						textStyle: {
							color: 'black',
							fontSize: '14'
						},
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#D7DCED'
						}

					},
					data: ['微博', '微信公众号', '头条', '百度', '腾讯新闻', '文书裁判网', '新闻']
				}, {
					type: 'category',
					inverse: false,
					axisTick: 'none',
					axisLine: 'none',
					show: true,
					/*axisLabel: {
						textStyle: {
							color: 'black',
							fontSize: '14'
						},
					},*/
					data: [800, 700, 650, 600, 500, 400, 300]
				}],
				yAxis: {
					show: true,
					type: 'value',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#D7DCED'
						}
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: 'black',
							fontSize: '14'
						},
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
				},
				series: [{
					name: '数量',
					type: 'bar',
					zlevel: 1,
					itemStyle: {
						normal: {
							barBorderRadius: [0, 0, 0, 0],
							color: new t.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
								offset: 0,
								color: '#1677FE'
							}, {
								offset: 1,
								color: '#1677FE'
							}]),
							shadowBlur: 0,
							shadowColor: 'rgba(87,220,222,0.7)'
						},
					},
					barWidth: 10,
					data: [800, 700, 650, 600, 500, 400, 300]
				},
					{
						z: 0,
						name: '背景',
						type: 'bar',
						barWidth: 20,
						barGap: '-150%',
						data: [800, 800, 800, 800, 800, 800, 800],
						itemStyle: {
							normal: {
								color: '#F2F4F7',
								barBorderRadius: [0, 0, 0, 0],
							}
						},
						emphasis: {
							itemStyle: {
								color: '#F2F4F7',
								barBorderRadius: [0, 0, 0, 0],
							},
						}
					},
				]

			})
		},
		drawScatter() {
			//生成假数据用
			var tempData = [];
			var start = 1635408000000;//2021-10-29 12:00:00
			var end = 1635926400000;//2021-11-03 16:00:00
			var cha = 518400000;//上面两个变量相差
			for (var i = 0; i < 100; i++) {
				var random = Math.random() * cha
				var random2 = Math.random() * 120
				var resultTime = start + random
				tempData[i] = [resultTime, random2, "安全漏洞"]
			}

			var today = new Date(new Date().toLocaleDateString())
			this.myChartScatter = this.$echarts.init(document.getElementById('scatterChart'))
			// 绘制图表
			this.myChartScatter.setOption({
				grid: {
					left: "6%",
					right: "8%",
					bottom: "11%",
				},
				tooltip: {
					trigger: 'item',
					showDelay: 0,
					formatter: function (params) {
						return params.value[2]
					},
				},
				xAxis: {
					min: start,
					max: end,
					type: "value",
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					maxInterval: 24 * 60 * 60 * 1000,
					axisLabel: {
						interval: 24 * 60 * 60 * 1000,
						formatter: function (params) {
							var oDate = new Date(params);
							var oYear = oDate.getFullYear();
							var oMonth = oDate.getMonth() + 1;
							var oDay = oDate.getDate();
							//var  oTime = oYear +'-'+ (oMonth) +'-'+ (oDay);
							var oTime = (oMonth) + '-' + (oDay);
							return oTime;
						}
					},
					axisPointer: {
						show: false,
						snap: true,
						label: {
							formatter: function (params) {
								var oDate = new Date(params.value);
								var oYear = oDate.getFullYear();
								var oMonth = oDate.getMonth() + 1;
								var oDay = oDate.getDate();
								// var   oTime = oYear +'-'+ (oMonth) +'-'+ (oDay);
								var oTime = (oMonth) + '-' + (oDay);
								return oTime;
							},
							precision: 0//文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。
						}
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
				},
				series: [
					{
						symbolSize: 12,
						data: tempData,
						type: 'scatter',
						itemStyle: {
							color: "#5DB5E2"
						}
					}
				]
			})
		},
		getecharts() {
			const chart1 = this.$refs.chart1
			if (chart1) {
				const myChart = this.$echarts.init(chart1)
				const option1 = {
					"textStyle": {
						"color": "#c0c3cd",
						"fontSize": 14
					},
					"toolbox": {
						"show": false,
						"feature": {
							"saveAsImage": {
								"backgroundColor": "#e8f2fe"
							},
							"restore": {}
						},
						"iconStyle": {
							"borderColor": "#c0c3cd"
						}
					},
					"legend": {
						"top": 10,
						"itemWidth": 8,
						"itemHeight": 8,
						"icon": "circle",
						"left": "center",
						"padding": 0,
						"textStyle": {
							"color": "#c0c3cd",
							"fontSize": 14,
							"padding": [2, 0, 0, 0]
						}
					},
					"color": ["#96bffe", "#66a3fb", "#e8f2fe", "#e8f2fe", "#e8f2fe", "#e8f2fe", "#a9abff", "#f7a23f", "#27bae7", "#ff6d9d", "#cb79ff", "#f95b5a", "#ccaf27", "#38b99c", "#93d0ff", "#bd74e0", "#fd77da", "#dea700"],
					"grid": {
						"containLabel": true,
						"left": 30,
						"right": 30,
						"bottom": 40,
						"top": 40
					},
					"xAxis": {
						"nameTextStyle": {
							"color": "#c0c3cd",
							"padding": [0, 0, -10, 0],
							"fontSize": 14
						},
						"axisLabel": {
							"color": "#c0c3cd",
							"fontSize": 14,
							"interval": 0
						},
						"axisTick": {
							"lineStyle": {
								"color": "#e8f2fe",
								"width": 1
							},
							"show": true
						},
						"splitLine": {
							"show": false
						},
						"axisLine": {
							"lineStyle": {
								"color": "#e8f2fe",
								"width": 1,
								"type": "dashed"
							},
							"show": true
						},
						"data": ["09-19", "09-20", "09-21", "09-22", "09-23", "09-24", "09-25", "09-26"],
						"type": "category"
					},
					"yAxis": {
						"nameTextStyle": {
							"color": "#c0c3cd",
							"padding": [0, 0, -10, 0],
							"fontSize": 14
						},
						"axisLabel": {
							"color": "#c0c3cd",
							"fontSize": 14
						},
						"axisTick": {
							"lineStyle": {
								"color": "#e8f2fe",
								"width": 1
							},
							"show": true
						},
						"splitLine": {
							"show": false,
							"lineStyle": {
								"color": "#384267",
								"type": "dashed"
							}
						},
						"axisLine": {
							"lineStyle": {
								"color": "#384267",
								"width": 1,
								"type": "dashed"
							},
							"show": true
						},
						"name": ""
					},
					"series": [{
						"data": [200, 85, 112, 275, 305, 415, 741, 405],
						"type": "bar",
						"barMaxWidth": "auto",
						"barWidth": 30,
						"itemStyle": {
							"color": {
								"x": 0,
								"y": 0,
								"x2": 0,
								"y2": 1,
								"type": "linear",
								"global": false,
								"colorStops": [{
									"offset": 0,
									"color": "#4591fd"
								}, {
									"offset": 1,
									"color": "#96bffe"
								}]
							}
						},
						"label": {
							"show": true,
							"position": "top",
							"distance": 10,
							"color": "#fff"
						}
					}, {
						"data": [1, 1, 1, 1, 1, 1, 1, 1],
						"type": "pictorialBar",
						"barMaxWidth": "20",
						"symbol": "diamond",
						"symbolOffset": [0, "50%"],
						"symbolSize": [30, 15]
					}, {
						"data": [200, 85, 112, 275, 305, 415, 741, 405],
						"type": "pictorialBar",
						"barMaxWidth": "20",
						"symbolPosition": "end",
						"symbol": "diamond",
						"symbolOffset": [0, "-50%"],
						"symbolSize": [30, 12],
						"zlevel": 2
					}, {
						"data": [741, 741, 741, 741, 741, 741, 741, 741],
						"type": "bar",
						"barMaxWidth": "auto",
						"barWidth": 30,
						"barGap": "-100%",
						"zlevel": -1
					}, {
						"data": [1, 1, 1, 1, 1, 1, 1, 1],
						"type": "pictorialBar",
						"barMaxWidth": "20",
						"symbol": "diamond",
						"symbolOffset": [0, "50%"],
						"symbolSize": [30, 15],
						"zlevel": -2
					}, {
						"data": [741, 741, 741, 741, 741, 741, 741, 741],
						"type": "pictorialBar",
						"barMaxWidth": "20",
						"symbolPosition": "end",
						"symbol": "diamond",
						"symbolOffset": [0, "-50%"],
						"symbolSize": [30, 12],
						"zlevel": -1
					}],
					"tooltip": {
						"trigger": "axis",
						"show": false
					}

				}

				myChart.setOption(option1)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
			const chart2 = this.$refs.chart2
			if (chart2) {

				const myChart = this.$echarts.init(chart2)
				const option2 = {
					// itemStyle: {
					//     normal: {
					//         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
					//             offset: 0,
					//             color: '#157eff'
					//         }, {
					//             offset: 1,
					//             color: '#35c2ff'
					//         }]),
					//     },
					//     shadowBlur: 10
					// },
					textStyle: {
						color: '#333',
						fontSize: 16,
						fontWeight: 600,
					},
					legend: [{
						formatter: function (name) {
							return echarts.format.truncateText(name, 200, '12px', '…');
						},
						tooltip: {
							show: true
						},
						selectedMode: 'false',
						bottom: 20,
					}],
					animationDurationUpdate: 1500,
					animationEasingUpdate: 'quinticInOut',
					xAxis: {
						show: false,
						type: 'value'
					},
					yAxis: {
						show: false,
						type: 'value'
					},
					series: [{

						type: 'graph',
						layout: 'none',
						//建头
						edgeSymbol: ['circle', 'none'],
						edgeSymbolSize: [4, 8],
						//edgeSymbolSize: [4, 8],
						edgeLabel: {show: true, textStyle: {fontSize: 10}, formatter: "{c}"},

						// edgeLabel: {
						//     show: true,
						//     normal: {
						//         show: true,
						//         position: 'middle',
						//         textStyle: {
						//             fontSize: 12
						//         },
						//         formatter: "{c}"
						//     }
						// },
						focusNodeAdjacency: true,
						roam: true,
						//圆形上面的文字
						label: {
							normal: {
								position: "right",
								show: true,
								textStyle: {
									fontSize: 14
								},
							}
						},
						lineStyle: {
							normal: {
								width: 1,
								shadowColor: 'none',
								color: '#868686'
							},
						},

						data: [{
							name: "贷款账户表",
							value: {num: 55, type: 0},
							symbolSize: 80,
							x: -50,
							y: 150,
							symbol: symbol1,
							label: {
								normal: {
									position: "bottom",
									show: true,
									textStyle: {
										fontSize: 14
									},
								}
							},
						}, {
							name: "中国电信湖南客服",
							x: 200,
							y: 220,
							symbolSize: [40, 40],
							symbol: symbol6,
						}, {
							name: "中国电信上海客服",
							x: 200,
							y: 180,
							symbolSize: [40, 40],
							symbol: symbol5,
						}, {
							name: "中国电信北京客服",
							x: 200,
							y: 140,
							//symbol: "rect",
							symbolSize: [40, 40],
							symbol: symbol4,
						}, {
							name: "中国电信营业厅官微",
							//symbol: "rect",
							x: 200,
							y: 100,
							symbolSize: [40, 40],
							symbol: symbol3,
						}, {
							name: "中国电信客服",
							// symbol: "rect",
							x: 200,
							y: 60,
							symbolSize: [40, 40],
							symbol: symbol2,
						},
							//节点B,C,D ....n
							{
								name: "YUIAN亿健",
								x: 400,
								y: 50,
								symbolSize: [40, 40],
								symbol: symbol7,
							}, {
								name: "三邮动力",
								x: 400,
								y: 100,
								symbolSize: [40, 40],
								symbol: symbol8,
							}, {
								name: "阿尔法蛋",
								x: 400,
								y: 150,
								symbolSize: [40, 40],
								symbol: symbol9,
							}, {
								name: "isk声科",
								x: 400,
								y: 200,
								symbolSize: [40, 40],
								symbol: symbol10,
							}, {
								name: "掌阅iReader",
								x: 400,
								y: 250,
								symbolSize: [40, 40],
								symbol: symbol11,
							}
						],

						links: [{
							source: "贷款账户表",
							value: " ",
							target: "中国电信客服",
						}, {
							source: "贷款账户表",
							value: " ",
							target: "中国电信营业厅官微",
						}, {
							source: "贷款账户表",
							value: " ",
							target: "中国电信北京客服",
						}, {
							source: "贷款账户表",
							value: " ",
							target: "中国电信上海客服",
						}, {
							source: "贷款账户表",
							value: " ",
							target: "中国电信湖南客服",
						}, {
							source: "中国电信客服",
							value: " ",
							target: "YUIAN亿健",
						}, {
							source: "中国电信客服",
							value: " ",
							target: "三邮动力",
						}, {
							source: "中国电信客服",
							value: " ",
							target: "阿尔法蛋",
						}, {
							source: "中国电信客服",
							value: " ",
							target: "isk声科",
						}, {
							source: "中国电信客服",
							value: " ",
							target: "掌阅iReader",
						}],
					}]
				};

				myChart.setOption(option2)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}


			const chart3 = this.$refs.chart3
			if (chart3) {

				const myChart = this.$echarts.init(chart3)
				const option3 = {
					textStyle: {
						color: '#333',
						fontSize: 16,
						fontWeight: 600,
					},
					legend: [{
						formatter: function (name) {
							return echarts.format.truncateText(name, 200, '12px', '…');
						},
						tooltip: {
							show: true
						},
						selectedMode: 'false',
						bottom: 20,
					}],
					animationDurationUpdate: 1500,
					animationEasingUpdate: 'quinticInOut',
					xAxis: {
						show: false,
						type: 'value'
					},
					yAxis: {
						show: false,
						type: 'value'
					},
					series: [{

						type: 'graph',
						layout: 'none',
						//建头
						edgeSymbol: ['circle', 'none'],
						edgeSymbolSize: [4, 8],
						//edgeSymbolSize: [4, 8],
						edgeLabel: {show: true, textStyle: {fontSize: 10}, formatter: "{c}"},
						focusNodeAdjacency: true,
						roam: true,
						//圆形上面的文字
						label: {
							normal: {
								position: "bottom",
								show: true,
								textStyle: {
									fontSize: 11
								},
							}
						},
						lineStyle: {
							normal: {
								width: 1,
								shadowColor: 'none',
								color: '#868686'
							},
						},

						data: [{
							name: "中国电信客服",
							value: {num: 55, type: 0},
							symbolSize: 50,
							x: 110,
							y: 110,
							symbol: symbol2,
						},
							//节点B,C,D ....n
							{
								name: "YUIAN亿健",
								value: "粉丝：30万\n二次转发：33\n转发时间：2021-03-27 17:15:00",
								x: 140,
								y: 80,
								symbolSize: [40, 40],
								symbol: symbol7,
								label: {
									normal: {
										position: "right",
										show: true,
										textStyle: {
											fontSize: 11
										}, formatter: params => {
											return `{a|${params.value}}\n{b|${params.name}}`
										},
										rich: {
											a: {
												color: '#868686',
												fontSize: 10,
											},
											b: {
												padding: [0, 0, 20, -55],
												fontSize: 10,
											},
										}
									},
								}
							}, {
								name: "三邮动力",
								value: "粉丝：30万\n二次转发：33\n转发时间：2021-03-27 17:15:00",
								x: 140,
								y: 110,
								symbolSize: [40, 40],
								symbol: symbol8,
								label: {
									normal: {
										position: "right",
										show: true,
										textStyle: {
											fontSize: 11
										}, formatter: params => {
											return `{a|${params.value}}\n{b|${params.name}}`
										},
										rich: {
											a: {
												color: '#868686',
												fontSize: 10,
											},
											b: {
												padding: [0, 0, 20, -55],
												fontSize: 10,
											},
										}
									},
								},
							}, {
								name: "阿尔法蛋",
								value: "粉丝：30万\n二次转发：33\n转发时间：2021-03-27 17:15:00",
								x: 138,
								y: 150,
								symbolSize: [40, 40],
								symbol: symbol9,
								label: {
									normal: {
										position: "right",
										show: true,
										textStyle: {
											fontSize: 11
										}, formatter: params => {
											return `{a|${params.value}}\n{b|${params.name}}`
										},
										rich: {
											a: {
												color: '#868686',
												fontSize: 10,
											},
											b: {
												padding: [0, 0, 30, -52],
												fontSize: 10,
											},
										}
									},
								},
							}, {
								name: "isk声科",
								value: "粉丝：30万\n二次转发：33\n转发时间：2021-03-27 17:15:00",
								x: 90,
								y: 135,
								symbolSize: [40, 40],
								symbol: symbol10,
								label: {
									normal: {
										position: "right",
										show: true,
										textStyle: {
											fontSize: 11
										}, formatter: params => {
											return `{a|${params.value}}\n{b|${params.name}}`
										},
										rich: {
											a: {
												color: '#868686',
												padding: [0, 0, 0, -210],
												fontSize: 10,
											},
											b: {
												padding: [0, 0, 30, -40],
												fontSize: 10,
											},
										}
									},
								},
							}, {
								name: "掌阅iReader",
								value: "粉丝：30万\n二次转发：33\n转发时间：2021-03-27 17:15:00",
								x: 90,
								y: 90,
								symbolSize: [40, 40],
								symbol: symbol11,
								label: {
									normal: {
										position: "right",
										show: true,
										textStyle: {
											fontSize: 11
										}, formatter: params => {
											return `{a|${params.value}}\n{b|${params.name}}`
										},
										rich: {
											a: {
												color: '#868686',
												padding: [0, 0, 0, -210],
												fontSize: 10,
											},
											b: {
												padding: [0, 0, 30, -50],
												fontSize: 10,
											},
										}
									},
								},
							}
						],

						links: [{
							source: "中国电信客服",
							value: " ",
							target: "YUIAN亿健",
						}, {
							source: "中国电信客服",
							value: " ",
							target: "三邮动力",
						}, {
							source: "中国电信客服",
							value: " ",
							target: "阿尔法蛋",
						}, {
							source: "中国电信客服",
							value: " ",
							target: "isk声科",
						}, {
							source: "中国电信客服",
							value: " ",
							target: "掌阅iReader",
						}],
					}]
				};

				myChart.setOption(option3)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
		},

		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;
			}
		},
		onSubmit() {
			console.log('submit!', this.form);
		},
	},
	mounted() {

		getInfo().then(res => {
			this.listData = res.data.list;
		})
		this.getecharts();
		this.echartShow();
		this.drawLine();
		this.drawPie();
		this.drawMediaBar();
		this.drawScatter();
		this.drawWorldCloud();
	}
}
</script>

<style scoped lang="scss">
.five_02 {
	height: 370px;
	margin-left: 20px;
	margin-right: 30px;
	border: 1px solid #dedede;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 10px

}

.five_01 {
	width: 100%;
	height: 8%;
	padding-left: 20px;
	margin-bottom: 8px
}

.five_01_01 {
	padding-top: 10px;
	border-bottom: 1px solid #1375ff
}

.five {
	width: 100%;
	height: 375px;
	padding-left: 20px;
}

.four_02_02 {
	width: 60%;
	background-color: #f7f7f7

}

.head_04_title {
	width: 80%;
	display: flex;
	flex-wrap: wrap
}

.head_04_01 {
	width: 20%;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.head_04 {
	width: 100%;
	height: 34%;
	display: flex
}

.four_02_01_01 {
	height: 50%;
	width: 100%;
}

.four_02_01 {
	width: 40%;
	display: flex;
	flex-wrap: wrap
}

.four_02 {
	height: 91%;
	margin-left: 20px;
	margin-right: 30px;
	display: flex;
	border: 1px solid #dedede;
	margin-bottom: 10px
}

.four_01 {
	width: 100%;
	height: 8%;
	padding-left: 20px
}

.four_01_01 {
	padding-top: 10px;
	border-bottom: 1px solid #1375ff
}

.four {
	width: 100%;
	height: 480px;
	padding-left: 20px
}

.third_02 {
	height: 92%;
	margin-left: 20px;
	margin-right: 30px;
	background-color: #f3f8fe
}

.third_01_01 {
	padding-top: 10px;
	border-bottom: 1px solid #1375ff
}

.third_01 {
	width: 100%;
	height: 8%;
	padding-left: 20px
}

.third {
	width: 100%;
	height: 460px;
	padding-left: 20px
}

.second_01 {
	width: 100%;
	padding-left: 20px;
	display: flex;
	flex-wrap: wrap;
	height: 230px
}

.second_02 {
	width: 100%;
	height: 80%;
	border: 1px solid #dedede;
	margin: 10px;
	margin-left: 20px;
	margin-right: 30px;
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	padding-top: 10px
}

.right-content {

	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > span {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	margin-left: 30px;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.tableTr {
	border: 1px solid #F5F8FF;
	height: 35px;
	width: 100%;
	background-color: white;
	display: flex;
	align-items: center;
	color: #A0A4AA;
}

.tableTd20 {
	width: 20%;
	text-align: center
}

.tableTd30 {
	width: 30%;
	text-align: center
}

.tableTd50 {
	width: 50%;
	text-align: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
</style>
